<template>
  <div class="home">
    <h1>欢迎使用Vue3全栈项目</h1>
    <div class="card">
      <p>当前计数: {{ counterStore.count }}</p>
      <button @click="counterStore.increment">+1</button>
    </div>
    <router-link to="/about">关于我们</router-link>
  </div>
</template>

<script setup lang="ts">
import { useCounterStore } from '@/stores/counter'

const counterStore = useCounterStore()
</script>

<style scoped>
.home {
  padding: 20px;
}
.card {
  margin: 20px 0;
  padding: 20px;
  border-radius: 8px;
  background: var(--el-bg-color);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
button {
  margin-right: 10px;
}
</style>